<template>
  <view class="container">
    <!-- 顶部导航栏 -->
    <view class="nav-bar">
      <view class="nav-left">
        <uni-icons type="back" size="24" color="#fff" @tap="goBack"/>
      </view>
      <view class="nav-center">
        <text class="nav-title">{{ currentDate }}</text>
      </view>
      <view class="nav-right">
        <uni-icons type="calendar" size="24" color="#fff" @tap="chooseDate"/>
      </view>
    </view>
    
    <!-- 内容区域 -->
    <scroll-view class="content" scroll-y>
      <!-- A校区值班人员 -->
      <view class="campus-section">
        <text class="campus-title">A校区{{ campusADutyList.length }}人</text>
        
        <view v-if="campusADutyList.length > 0" class="duty-list">
          <view v-for="item in campusADutyList" :key="item.id" class="duty-item">
            <view class="duty-header">
              <view class="avatar">
                <text class="avatar-text">证</text>
              </view>
              <view class="user-details">
                <text class="username">{{ item.name }}</text>
                <text class="user-id">{{ item.id }}</text>
              </view>
              <uni-icons type="phone" size="28" color="#007AFF" @tap="callUser(item)"/>
            </view>
            
            <view class="duty-info">
              <view class="info-row">
                <text class="info-label">值班开始时间：</text>
                <text class="info-value">{{ item.startTime }}</text>
              </view>
              <view class="info-row">
                <text class="info-label">值班结束时间：</text>
                <text class="info-value">{{ item.endTime }}</text>
              </view>
              <view class="info-row">
                <text class="info-label">值班校区：</text>
                <text class="info-value">{{ item.campus }}</text>
              </view>
              <view class="info-row">
                <text class="info-label">值班交接地点：</text>
                <text class="info-value">{{ item.location }}</text>
              </view>
              <view class="info-row">
                <text class="info-label">值班住宿地址：</text>
                <text class="info-value">{{ item.accommodation }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>
      
      <!-- B校区值班人员 -->
      <view class="campus-section">
        <text class="campus-title">B校区{{ campusBDutyList.length }}人</text>
        
        <view v-if="campusBDutyList.length === 0" class="empty-state">
          <text class="empty-text">暂无值班人员</text>
        </view>
        
        <view v-else class="duty-list">
          <view v-for="item in campusBDutyList" :key="item.id" class="duty-item">
            <view class="duty-header">
              <view class="avatar">
                <text class="avatar-text">证</text>
              </view>
              <view class="user-details">
                <text class="username">{{ item.name }}</text>
                <text class="user-id">{{ item.id }}</text>
              </view>
              <uni-icons type="phone" size="28" color="#007AFF" @tap="callUser(item)"/>
            </view>
            
            <view class="duty-info">
              <view class="info-row">
                <text class="info-label">值班开始时间：</text>
                <text class="info-value">{{ item.startTime }}</text>
              </view>
              <view class="info-row">
                <text class="info-label">值班结束时间：</text>
                <text class="info-value">{{ item.endTime }}</text>
              </view>
              <view class="info-row">
                <text class="info-label">值班校区：</text>
                <text class="info-value">{{ item.campus }}</text>
              </view>
              <view class="info-row">
                <text class="info-label">值班交接地点：</text>
                <text class="info-value">{{ item.location }}</text>
              </view>
              <view class="info-row">
                <text class="info-label">值班住宿地址：</text>
                <text class="info-value">{{ item.accommodation }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
    
    <!-- 底部导航按钮 -->
    <view class="bottom-nav">
      <view class="nav-item active" @tap="navigateTo('/pages/college/duty-status')">
        <uni-icons type="grid" size="24" color="#007AFF"/>
        <text class="nav-text active">值班安排</text>
      </view>
      <view class="nav-item" @tap="navigateTo('/pages/college/more-functions')">
        <uni-icons type="grid" size="24" color="#999"/>
        <text class="nav-text">更多功能</text>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        currentDate: '',
        campusADutyList: [],
        campusBDutyList: []
      }
    },
    
    onLoad() {
      // 设置当前日期
      const now = new Date();
      const year = now.getFullYear();
      const month = String(now.getMonth() + 1).padStart(2, '0');
      const day = String(now.getDate()).padStart(2, '0');
      this.currentDate = `${year}年${month}月${day}日`;
      
      // 加载值班数据
      this.loadDutyData();
    },
    
    methods: {
      // 加载值班数据
      loadDutyData() {
        // 模拟从服务器获取数据
        // 这里使用模拟数据
        this.campusADutyList = [
          {
            id: '10086',
            name: '教职工姓名',
            startTime: '2025/2/24 18:00:00',
            endTime: '2025/2/25 8:00:00',
            campus: 'A校区',
            location: '新顺学生活动中心3层辅导员发展中心',
            accommodation: '值班住宿地址'
          },
          {
            id: '10086',
            name: '教职工姓名',
            startTime: '2025/2/24 18:00:00',
            endTime: '2025/2/25 8:00:00',
            campus: 'A校区',
            location: '新顺学生活动中心3层辅导员发展中心',
            accommodation: '值班住宿地址'
          },
          {
            id: '10086',
            name: '教职工姓名',
            startTime: '2025/2/24 18:00:00',
            endTime: '2025/2/25 8:00:00',
            campus: 'A校区',
            location: '新顺学生活动中心3层辅导员发展中心',
            accommodation: '值班住宿地址'
          }
        ];
        
        // B校区暂无数据
        this.campusBDutyList = [];
      },
      
      // 返回上一页
      goBack() {
        uni.navigateBack();
      },
      
      // 选择日期
      chooseDate() {
        uni.showDatePicker({
          success: (res) => {
            const date = new Date(res.year, res.month, res.day);
            const year = date.getFullYear();
            const month = String(date.getMonth() + 1).padStart(2, '0');
            const day = String(date.getDate()).padStart(2, '0');
            this.currentDate = `${year}年${month}月${day}日`;
            // 这里可以根据选择的日期重新加载数据
          }
        });
      },
      
      // 拨打用户电话
      callUser(item) {
        uni.makePhoneCall({
          phoneNumber: item.id, // 实际应用中应该使用真实的电话号码
          success: () => {
            console.log('拨打电话成功');
          },
          fail: (err) => {
            console.log('拨打电话失败', err);
          }
        });
      },
      
      // 导航到指定页面
      navigateTo(url) {
        // 如果点击的是当前页面，则不跳转
        if (getCurrentPages().slice(-1)[0].route !== url.replace('/pages/', '')) {
          uni.navigateTo({
            url: url
          });
        }
      }
    }
  }
</script>

<style scoped>
  .container {
    height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: #f5f5f5;
  }
  
  .nav-bar {
    height: 88rpx;
    background-color: #007AFF;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 30rpx;
  }
  
  .nav-left {
    width: 60rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .nav-center {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .nav-title {
    color: #fff;
    font-size: 36rpx;
    font-weight: bold;
  }
  
  .nav-right {
    width: 60rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .content {
    flex: 1;
    padding: 20rpx;
  }
  
  .campus-section {
    margin-bottom: 20rpx;
  }
  
  .campus-title {
    display: block;
    font-size: 28rpx;
    color: #333;
    margin-bottom: 10rpx;
    padding-left: 10rpx;
  }
  
  .duty-list {
    background-color: #fff;
    border-radius: 10rpx;
    overflow: hidden;
  }
  
  .duty-item {
    padding: 20rpx;
    border-bottom: 1rpx solid #eee;
  }
  
  .duty-item:last-child {
    border-bottom: none;
  }
  
  .duty-header {
    display: flex;
    align-items: center;
    margin-bottom: 15rpx;
  }
  
  .avatar {
    width: 60rpx;
    height: 60rpx;
    border-radius: 30rpx;
    background-color: #007AFF;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15rpx;
  }
  
  .avatar-text {
    color: #fff;
    font-size: 28rpx;
    font-weight: bold;
  }
  
  .user-details {
    flex: 1;
  }
  
  .username {
    display: block;
    font-size: 28rpx;
    color: #333;
    font-weight: bold;
  }
  
  .user-id {
    display: block;
    font-size: 24rpx;
    color: #666;
    margin-top: 5rpx;
  }
  
  .duty-info {
    padding-left: 75rpx;
  }
  
  .info-row {
    font-size: 24rpx;
    color: #333;
    margin-bottom: 8rpx;
  }
  
  .info-row:last-child {
    margin-bottom: 0;
  }
  
  .info-label {
    color: #666;
  }
  
  .info-value {
    color: #333;
  }
  
  .empty-state {
    background-color: #fff;
    border-radius: 10rpx;
    padding: 20rpx;
    text-align: center;
  }
  
  .empty-text {
    font-size: 28rpx;
    color: #999;
  }
  
  /* 底部导航样式 */
  .bottom-nav {
    height: 120rpx;
    display: flex;
    background-color: #fff;
    border-top: 1rpx solid #eee;
  }
  
  .nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  
  .nav-item.active .nav-text {
    color: #007AFF;
  }
  
  .nav-text {
    font-size: 24rpx;
    color: #999;
    margin-top: 8rpx;
  }
</style>